<template>
  <div class="account-info">
    <div class="account-setting-item">
      <div class="sub-section-title text-center text-md-start">
        <h2 class="sub-section-title-heading">My Addresses</h2>
        <p>
          The following addresses will be used on the checkout page by default.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="billing-title">
          <h4>Biliing Address</h4>
          <p>Edit</p>
        </div>
        <div class="billing-address">
          <address>
            UK <br />
            3227 Millbrook Road
          </address>
          <p class="billing-address-info">
            You have not set up this type of address yet.
          </p>
        </div>
        <div class="billing-address-input">
          <form>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group mb-20">
                  <label>Email*</label>
                  <input
                    type="text"
                    name="email"
                    class="form-control form-control-background-white"
                    required=""
                    placeholder="Email address"
                  />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group mb-20">
                  <label>Phone*</label>
                  <input
                    type="text"
                    name="phone"
                    class="form-control form-control-background-white"
                    required=""
                    placeholder="Phone number"
                  />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group mb-20">
                  <label>First Name*</label>
                  <input
                    type="email"
                    name="name"
                    class="form-control form-control-background-white"
                    required=""
                    placeholder="First name"
                  />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group mb-20">
                  <label>Last Name*</label>
                  <input
                    type="email"
                    name="name"
                    class="form-control form-control-background-white"
                    required=""
                    placeholder="Last name"
                  />
                </div>
              </div>
              <div class="col-12">
                <div class="form-group mb-20">
                  <label>Address</label>
                  <input
                    type="text"
                    name="company-name"
                    class="form-control form-control-background-white"
                    placeholder="Address"
                  />
                </div>
              </div>
              <div class="col-12">
                <div class="form-group mb-20">
                  <label>State / Country*</label>
                  <input
                    type="text"
                    name="state-country"
                    class="form-control form-control-background-white"
                    required=""
                    placeholder="State / Country"
                  />
                </div>
              </div>
              <div class="col-12">
                <button type="submit" class="btn main-btn main-btn-secondary">
                  Save Changes
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const {} = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const methods = {};
</script>
<style lang="scss" scoped></style>
